<!--
  用户详情查看弹窗组件
  @author Wu.Liang
  @date 2024-12-21
-->
<template>
    <el-dialog 
        v-model="dialogVisibleComputed" 
        title="用户详情" 
        width="800px" 
        :close-on-click-modal="false"
    >
        <div v-if="userData" class="user-detail">
            <!-- 基本信息卡片 -->
            <el-card class="info-card" shadow="never">
                <template #header>
                    <div class="card-header">
                        <span>基本信息</span>
                    </div>
                </template>
                
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="avatar-section">
                            <el-avatar :src="userData.avatar" :size="80">
                                {{ getUserInitial(userData.realName || userData.username) }}
                            </el-avatar>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="用户名">
                                {{ userData.username }}
                            </el-descriptions-item>
                            <el-descriptions-item label="真实姓名">
                                {{ userData.realName || '未设置' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="手机号">
                                {{ userData.phone || '未设置' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="邮箱">
                                {{ userData.email || '未设置' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="用户类型">
                                <el-tag :type="getUserTypeTagType(userData.userType)" size="small">
                                    {{ userData.userTypeText || getUserTypeText(userData.userType) }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="状态">
                                <el-tag :type="getStatusTagType(userData.status)" size="small">
                                    {{ userData.statusText || getStatusText(userData.status) }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="所属角色">
                                {{ userRoles.length > 0 ? userRoles.join('、') : '未分配角色' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="创建时间">
                                {{ formatDate(userData.createTime) }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>
            </el-card>

            <!-- 登录历史卡片 -->
            <el-card class="info-card" shadow="never" style="margin-top: 20px;">
                <template #header>
                    <div class="card-header">
                        <span>登录历史</span>
                    </div>
                </template>
                
                <div v-if="loginHistory.length > 0">
                    <el-table :data="loginHistory" stripe style="width: 100%">
                        <el-table-column prop="loginTime" label="登录时间" width="160">
                            <template #default="{ row }">
                                {{ formatDate(row.loginTime) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="loginIp" label="登录IP" width="120" />
                        <el-table-column prop="loginAddress" label="登录地点" width="120" />
                        <el-table-column prop="browser" label="浏览器" width="120" />
                        <el-table-column prop="os" label="操作系统" width="120" />
                        <el-table-column prop="loginStatus" label="状态" width="80">
                            <template #default="{ row }">
                                <el-tag :type="row.loginStatus === 0 ? 'success' : 'danger'" size="small">
                                    {{ row.loginStatus === 0 ? '成功' : '失败' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-else class="empty-data">
                    <el-empty description="暂无登录记录" />
                </div>
            </el-card>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibleComputed = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserRoles, getUserLoginHistory, type LoginLog } from '@/api/user'

// 定义props
interface Props {
    modelValue: boolean
    userData: any
}

const props = defineProps<Props>()

// 定义emits
const emit = defineEmits<{
    'update:modelValue': [value: boolean]
}>()

// 响应式数据
const userRoles = ref<string[]>([])
const loginHistory = ref<LoginLog[]>([])

// 计算属性处理v-model
const dialogVisibleComputed = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})

// 监听modelValue变化
watch(() => props.modelValue, (newVal) => {
    if (newVal && props.userData) {
        loadUserDetail()
    }
})

// 加载用户详情
const loadUserDetail = async () => {
    if (!props.userData?.id) return
    
    try {
        // 加载用户角色
        const rolesResponse = await getUserRoles(props.userData.id)
        userRoles.value = rolesResponse.data || []
        
        // 加载登录历史
        const historyResponse = await getUserLoginHistory(props.userData.id, 5)
        loginHistory.value = historyResponse.data || []
    } catch (error: any) {
        ElMessage({ type: 'error', message: '加载用户详情失败: ' + (error.message || error) })
    }
}

// 格式化日期
const formatDate = (date: string) => {
    if (!date) return ''
    return new Date(date).toLocaleString('zh-CN')
}

// 用户类型相关方法
const getUserTypeText = (type: number) => {
    const typeMap: Record<number, string> = {
        1: '居民',
        2: '物业',
        3: '管理员',
        4: '其他'
    }
    return typeMap[type] || '未知'
}

const getUserTypeTagType = (type: number) => {
    const typeMap: Record<number, string> = {
        1: 'info',
        2: 'success',
        3: 'danger',
        4: 'warning'
    }
    return typeMap[type] || 'info'
}

// 状态相关方法
const getStatusText = (status: number) => {
    const statusMap: Record<number, string> = {
        0: '禁用',
        1: '正常',
        2: '锁定'
    }
    return statusMap[status] || '未知'
}

const getStatusTagType = (status: number) => {
    const statusMap: Record<number, string> = {
        0: 'danger',
        1: 'success',
        2: 'warning'
    }
    return statusMap[status] || 'info'
}

// 获取用户首字母
const getUserInitial = (name: string) => {
    if (!name) return ''
    return name.charAt(0).toUpperCase()
}
</script>

<style scoped>
.user-detail {
    padding: 0;
}

.info-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.avatar-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.empty-data {
    text-align: center;
    padding: 40px 0;
}

.dialog-footer {
    text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .user-detail {
        max-height: 400px;
    }
    
    .avatar-section {
        padding: 10px 0;
    }
}
</style> 